<!--
 * @fileName: videowall.vue
 * @author: quzhongyuan
 * @date: 2024-01-06 11:04:10
 * @description:
 -->
<template>
  <div class="videoWall">
    <div class="videoWall-left">
      <div class="videoCon">
        <VideoPlayer ref="videoPlayer"></VideoPlayer>
      </div>
      <div class="personPhotos">
        <div class="title">
          <span class="title-world" @click="playVideo()">实时人脸</span> Q5C-N27-192.168.0.100
        </div>
        <!--    效果展示异常    -->
        <div class="photos">
          <span class="img1" v-for="item in faceData" :key="item.id">
            <img :src="item.image" alt=""/>
          </span>
        </div>
      </div>
    </div>
    <div class="videoWall-right">
      <div class="right-con" v-for="info in alarmList" :key="info.subject">
        <span class="right-img">
          <img :src="info.image" alt=""/>
        </span>

        <div class="des">
          <p class="bt">名单：2111B</p>
          <p class="bt">姓名：{{ info.name }}</p>
          <p class="bt">性别：{{ info.gender === 1 ? '男' : info.gender === 0 ? '女' : '' }}</p>
          <p class="bt">年龄：{{ info.age }}</p>
          <p class="bt">时间：{{ info.captureTime }}</p>
          <p class="bt">相似度：{{ (info.similarity).toFixed(2) }}%</p>
        </div>

        <span class="right-img">
          <img :src="info.oldImg" alt=""/>
        </span>
      </div>
    </div>
  </div>
</template>
<script>

import VideoPlayer from "@/components/Video/videoPlayer.vue";
import { captureData } from '@/api/community/dataCenter'
import { listAlarm } from '@/api/deploy/alarm'

export default {
  components: {VideoPlayer},
  data() {
    return {
      faceData: [],
      form: {
        queryObj: {},
        keyWords: '',
        pageVo: {
          pageSize: 10,
          currentPage: 1,
          totalDocs: 1
        },
        searchFields: [
          ''
        ],
        highLightFields: [
          ''
        ],
        indexName: '',
        typeName: '',
        startTime:'',
        endTime:''
      },
      text: '',
      onlineUser: [],
      messageList: [],
      socket: '',
      baseUrl: "http://10.113.16.227:19111/websocket/badao",
      //人脸抓拍
      captureImgages: [],
      //人脸比对
      personInfos: [],
      alarmList:[],
      total:''
    }
  },
  computed: {
  },
  created() {
    this.res()
    this.getList();

  },
  mounted() {
    //打开webSocket连接
    this.onOpen()
    // this.startTimer();
  },
  methods: {
    // startTimer() {
    //   // 每5秒更新一次当前时间和获取数据
    //   this.timer = setInterval(() => {
    //     this.res(); // 更新当前时间
    //     this.getList();  // 获取数据
    //   }, 3000);
    // },
    res() {
      this.form.flag = 1
      captureData(this.form).then(res => {
        this.faceData = []
        this.total = res.data.total
        this.faceData = res.data.list
      })
    },
    getList() {
      listAlarm().then(response => {
        this.alarmList = []
        this.alarmList = response.rows;
        this.total = response.total;
      });
    },
    playVideo() {
      this.$refs.videoPlayer.startPlay();
    },
    // 连接socket
    onOpen: function() {
      if (typeof WebSocket == 'undefined') {
        console.log('你的浏览器不支持webSocket')
        return
      }
      const url = this.baseUrl

      this.socket = new WebSocket(url)

      this.socket.onopen = () => {
        console.log('websocket打开了,用户1连接成功')
      }

      this.socket.onmessage = (data) => {
        this.res()
        this.getList()
        console.log(data)
        // alert(data)
        // var message = JSON.parse(data.data)
        // //判断captureImgages长度，只保留最新的十个
        // if (this.captureImgages.length > 10) {
        //
        //   this.captureImgages.shift()
        // }
        // // 判断是否为人脸比对
        // if (message.isMatch == 1) {
        //   this.personInfos.push(message)
        // } else {
        //   this.captureImgages.push(message);
        // }
      }
      this.socket.onclose = function() {
        console.log('断开连接成功')
      }
      this.playVideo()
    }
  },
  beforeDestroy() {
    this.socket.close() // 关闭socket
  }
};
</script>
<style lang='less' scoped>
.videoWall {
  width: 100%;
  height: 100%;
  display: flex;
  background: #000;

  &-left {
    width: calc(70% - 20px);
    height: calc(100% - 20px);
    // background: orange;
    padding: 10px;

    .videoCon {
      width: 100%;
      height: calc(70% - 2px);
      text-align: center;
      color: #fff;
      font-size: 30px;
      background: orangered;
      border: 1px solid orangered;
    }

    .personPhotos {
      height: 30%;
      width: 100%;

      .title {
        width: 100%;
        height: 40px;
        line-height: 40px;
        margin: 10px 0;
        color: #fff;
        font-size: 18px;
        background: #235782;
        border: 1px solid #298fe4;

        .title-world {
          font-weight: bold;
          margin-right: 10px;
          padding-left: 10px;
        }
      }

      .photos {
        width: 100%;
        height: calc(100% - 62px);
        padding-bottom: 10px;
        overflow: hidden;
        overflow-x: scroll;
        white-space: nowrap;

        .img1 {
          display: inline-block;
          width: 120px;
          height: calc(100% - 2px);
          border: 1px solid #298fe4;
          margin-right: 10px;

          img {
            display: inline-block;
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }

  &-right {
    width: calc(30% - 30px);
    height: calc(100% - 40px);
    // background: pink;
    padding: 30px 10px 10px 20px;
    // display: flex;
    // flex-wrap: wrap;
    overflow: hidden;
    overflow-y: scroll;

    .right-con {
      width: 100%;
      height: 150px;
      display: flex;
      justify-content: start;
      margin-bottom: 10px;
      float: left;
      z-index: 100000000;

      .right-img {
        display: inline-block;
        width: 120px;
        height: calc(100% - 2px);
        border: 1px solid #298fe4;
        margin-right: 10px;
        margin-left: 10px;

        img {
          display: inline-block;
          width: 100%;
          height: 100%;
        }
      }

      .des {
        font-size: 13px;
        color: #fff;

        .bt {
          margin: 0;
          margin-bottom: 5px;
        }
      }
    }
  }
}

::-webkit-scrollbar {
  height: 5px;
  width: 5px;
}

::-webkit-scrollbar-track {
  background: rgba(190, 190, 190, 0.5);
}

::-webkit-scrollbar-thumb {
  background: rgba(190, 190, 190, 1);
}
</style>
